<template>
	<view class="model-category-component">
		<view class="model-category-body">
			<scroll-view
				scroll-x="true"
				:scroll-with-animation="true"
				class="model-scroll-view"
			>
				<view class="model-category-list">
					<view
						v-for="(v, i) in list"
						:key="i"
						class="model-category-item"
						:class="{
							active: v.classId === active
						}"
						@click="change(v)"
					>
						{{ v.className }}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: Array,
		active: String
	},
	methods: {
		change (item) {
			if (this.active === item.classId) return
			this.$emit('change', item)
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>